<template>
  <div>
    <div  style="width: 85%;margin: 10px auto;text-align: center;" >
      <div class="card bj-txt">
        <el-link :underline="false" @click="router.push('/')">
          <h3> 首页</h3>
          <el-divider direction="vertical" />
        </el-link>
        <h4  >{{ router.currentRoute.value.meta.name }}</h4>
      </div>
      <div >
        <el-row :gutter="10">
          <el-col :span="18">
            <el-row :gutter="10">
              <el-col :span="8" v-for="(item,i) in data.goodslist" :key="i" style="margin: 10px 0;">
                <el-card shadow="hover" style="border-radius: 10px;">
                  <div class="grid-content bg-purple" >
                    <img :src="item.fileimg" @click="router.push('/front/goodsDateil?id='+item.id)" style="width: 100%;height: 230px;border-radius: 10px;">
                    <div style="text-align: left;padding: 5px 5px;" >
                      <span >
                      <b style="color: #ff0808">
                      <template v-if="item.tjprice>0">
                        <span class="strike">￥{{item.price}}</span>
                        <span style="margin-left: 10px">￥{{item.tjprice}}</span>
                      </template>
                      <template v-else>
                        <span>￥{{item.price}}</span>
                      </template>
                    </b>
                      </span>
                      | <el-tag type="danger">{{ item.typename }}</el-tag>
                      | <el-tag type="warning" >{{ item.category.name }}</el-tag>
                      <div style="padding: 5px 5px;">
                      <el-link :underline="false" @click="router.push('/front/goodsDateil?id='+item.id)">
                        <a> {{item.name}}</a>
                      </el-link>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="6" style="margin-top: 10px">
            <el-card shadow="always" class="front-left">
              <div style="margin-top: 30px;">
                <h3>搜索</h3>
                <div style="min-height: 80px;">
                  <el-input clearable v-model="data.key" placeholder="请输入名称" style="width: 200px;margin-right: 10px;"></el-input>
                  <el-button type="warning" size="default" @click="load(data.key,data.key1)">搜索</el-button>
                </div>
              </div>
            </el-card>
            <el-card shadow="always" class="front-left" style="margin-top: 10px;">
              <div style="margin-top: 30px;margin-bottom: 30px;">
                <h3>分类搜索</h3>
                <div>
                  <el-button :size="'small'" type="warning" :plain="data.key1!==undefined" size="default" @click="load('','')" style="margin-bottom: 10px;">全部</el-button>
                  <el-button :size="'small'" type="warning" :plain="data.key1!==category.id" size="default" @click="load('',category.id)" v-for="(category,i) in data.categorylist" style="margin-bottom: 10px;">
                    {{ category.name }}
                  </el-button>
                </div>
              </div>
            </el-card>

            <el-card shadow="always" class="front-left" style="margin-top: 10px;">
              <div>
                <h3>销量排行</h3>
                <div>
                  <div v-for="(item, x) in data.orlist" :key="item.id" v-show="x<5" >

                    <div style="display: flex;margin-top: 15px;">
                      <div>
                        <img :src="item.goods.fileimg" @click="router.push('/front/goodsDateil?id='+item.goodsid)" style="width: 80px;height: 80px;border-radius: 10px;">
                      </div>
                      <div style="padding-left: 15px;line-height: 1;text-align: left">
                        <div class="overflowShow" >
                          <a href="javascript:void (0)" @click="router.push('/front/goodsDateil?id='+item.goodsid)" style="text-decoration: none;color: #545c64">
                            <strong >{{item.goods.name}}</strong>
                          </a>
                        </div>
                        <p style="color: #888888FF">销量：{{item.slnum}} </p>
                        <span style="padding-top: 5px;">
                      <b style="color: #ff5000">
                      <template v-if="item.goods.tjprice>0">
                        <span class="strike">￥{{item.goods.price}}</span>
                        <span style="margin-left: 10px">￥{{item.goods.tjprice}}</span>
                      </template>
                      <template v-else>
                        <span>￥{{item.goods.price}}</span>
                      </template>
                    </b>
                      </span>
                      </div>
                    </div>
                    <div style="border-top: 1px dashed #eee"></div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="block" v-if="data.total>0" style="margin: 10px auto;display: flex;justify-content: center">
        <el-pagination
            @current-change="load()"
            :current-page="data.pageNum"
            :page-size="data.pageSize"
            background
            layout="prev, pager, next"
            :total="data.total">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script setup>
import {createApp, onMounted, onUnmounted, reactive, ref} from "vue";
import request from '@/utils/request.js'
import qs from "qs";
import {useRouter} from "vue-router";
import {listenMsg} from "@/utils/crossTagMsg.js";
const router = useRouter()
const data = reactive({
  member: JSON.parse(localStorage.getItem('member') || '{}'),
  key:'',
  key1:'',
  pageNum: 1,
  pageSize: 9,
  total: 0,
  categorylist:[],
  goodslist:[],
  orlist:[],
})

//查询菜品销量排行
const getorlist = () =>{
  request.post('GoodsXlnumPh',qs.stringify({
  })).then(res=>{
      data.orlist = res.data
  })
}

//查询分类列表
const getclist=()=>{
request.post('cateListAll').then(res=>{
  data.categorylist = res.data
})
}

//信息列表
const load =(key,key1)=>{
  data.key1 = key1 || undefined
  request.post('/goods/list', qs.stringify({
    key:data.key,
    key1:data.key1,
    pageNum: data.pageNum,
    pageSize: data.pageSize,
  })).then(res => {
    data.goodslist = res.data.list
    data.total = res.data.total
  })
}

onMounted(() => {
  getorlist()
  getclist()
  load()
})
const cancelListen = listenMsg(msginfo=>{
  if (msginfo.type==='goods更新' || msginfo.type==='分类更新'){
    load()
    getclist()
  }
})
onUnmounted(cancelListen)

</script>
<style scoped>

</style>
